<template>
	<el-dialog v-model="state.dialogVisible" draggable :close-on-click-modal="false" :width="state.width + 8 + 'mm'">
     
		<div id="preview_content" ref="previewContentRef"></div> 
	<template #footer> 
			<el-button type="primary" icon="ele-Printer" @click.stop="toPdf">导出PDF</el-button>
		 
		</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
// import echats from 'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js';
import echats from '/@/assets/echarts.min.js'
import { hiprint } from 'vue-plugin-hiprint';
import { getAPI } from '/@/utils/axios-utils';
import { SysPrintApi } from '/@/api-services/api'; 
import { SysPrint } from '/@/api-services/models';
import moment from 'moment';
import html2pdf from 'html2pdf.js';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const state = reactive({
	dialogVisible: false,
	waitShowPrinter: false,
	width: 0, // 纸张宽 mm
	printData: {list:[]}, // 打印数据
	hiprintTemplate: {} as any,
	curPaper: {
		type: 'A4',
		width: 220,
		height: 296.6,
	},
});
// 初始化打印模板设计器
let template = {};
let hiprintTemplate = ref();
	hiprintTemplate.value = new hiprint.PrintTemplate({
		template: template,
		settingContainer: '#PrintElementOptionSetting',
		paginationContainer: '.hiprint-printPagination',
	});
	hiprintTemplate.value.design('#hiprint-printTemplate');
		// 获取当前放大比例, 当zoom时传true才会有
		state.scaleValue = hiprintTemplate.value.editingPanel.scale || 1;

const previewContentRef = ref();

const showDialog = (templateinfo:string,printData:{list:[]}, width = 210) => {
	state.dialogVisible = true;
	state.width = width;
	hiprintTemplate.value.update(JSON.parse(templateinfo));
	state.printData = printData;
	nextTick(() => {
		while (previewContentRef.value?.firstChild) {
			previewContentRef.value.removeChild(previewContentRef.value.firstChild);
		}
		for	(let i=0 ;i<printData.list.length;i++)
		{ 
			const newHtml = hiprintTemplate.value.getHtml(printData.list[i]);
			previewContentRef.value.appendChild(newHtml[0]);
		}
	});
};

const print = (templateinfo:string,printData:{}) => {
	 state.width=state.curPaper.width;
	hiprintTemplate.value.update(JSON.parse(templateinfo));
	state.waitShowPrinter = true;
	hiprintTemplate.value.getHTML().print(
		printData,
		{},
		{
			callback: () => {
				state.waitShowPrinter = false;
			},
		}
	);
};
const printByName = async (templatename:string,printData:{}) => {
	var temp= await getAPI(SysPrintApi).apiSysPrintPagePost({name:templatename});
	var info= temp.data.result.items[0];
	 state.width=state.curPaper.width
	hiprintTemplate.value.update(JSON.parse(info.template));
	state.waitShowPrinter = true;
	hiprintTemplate.value.print(
		printData,
		{},
		{
			callback: () => {
				state.waitShowPrinter = false;
			},
		}
	);
};

const toPdf = () => {
	console.log('printdata',state.printData)

	hiprintTemplate.value.toPdf(state.printData.list[0], 'PDF文件');
};
// 生成PDF
const generatePDF = async () => {
	// 获取要生成 PDF 的 div 元素
	const targetDiv = document.getElementById('printContent'); // 替换为你的实际 div ID
	if (!targetDiv) {
		return;
	}

	// 获取要隐藏的子元素
	const elementToHide = targetDiv.querySelector('#elementToHide');
	if (!elementToHide) {
		return;
	}
	// 隐藏要隐藏的子元素
	elementToHide.style.display = 'none';

	// 设置生成的 PDF 文件名
	const filename = state.orderDetailData.operationName + '.pdf'; // 替换为你想要的文件名

	// 设置 html2pdf 的选项
	const options = {
		filename,
		margin: 2, // 设置页面边距
		image: { type: 'jpeg', quality: 0.98 }, // 设置图片质量
		html2canvas: { scale: 2 }, // 设置 html2canvas 的缩放比例
		jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }, // 设置 jsPDF 的选项
		pagebreak: { mode: 'avoid-all' },
	};

	// 使用 html2pdf 将 div 转换为 PDF
	html2pdf().set(options).from(targetDiv).save();

	// 生成完毕后还原样式
	setTimeout(() => {
		elementToHide.style.display = '';
	}, 1000);

	// html2pdf(targetDiv, options)
	// 	.then((pdf) => {
	// 		// 生成完毕后还原样式
	// 		elementToHide.style.display = '';
	// 		// 生成 PDF 成功后，打开打印对话框
	// 		if (pdf) {
	// 			pdf.output('dataurlnewwindow');
	// 		} else {
	// 			console.error('Generated PDF is undefined');
	// 		}
	// 	})
	// 	.catch((error) => {
	// 		console.error('Error generating PDF:', error);
	// 		// 在错误处理中也要还原样式
	// 		elementToHide.style.display = '';
	// 	});
};
const toPdfWithData = (printData:{}) => {
	hiprintTemplate.value.toPdf(printData, 'PDF文件');
};

const hideDialog = () => {
	state.dialogVisible = false;
};

defineExpose({ showDialog,print,printByName,toPdf });
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
	padding: 0px;
}

:deep(.ant-modal-content) {
	margin-bottom: 24px;
}
</style>
